<template>
  <div class="app-container home">
    <!-- 顶部欢迎区域 -->
    <div class="hero-section" data-aos="fade-down">
      <div class="hero-bg-animation"></div>
      <div class="hero-content">
        <h1 class="hero-title float-animation">
          <span class="title-text">智能居家睡眠监护系统</span>
          <span class="title-glow"></span>
        </h1>
        <p class="hero-subtitle">现代化的设备与传感器数据监控平台</p>
        <div class="hero-buttons">
          <el-button type="primary" size="medium" icon="el-icon-monitor" @click="goToDevices" class="glow-button primary interactive-button">
            进入控制台
          </el-button>
          <el-button type="info" size="medium" icon="el-icon-data-line" plain @click="goToDashboard" class="glow-button interactive-button">
            传感器数据
          </el-button>
        </div>
      </div>
      <div class="floating-shapes pulse-ring">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
      </div>
    </div>

    <!-- 系统概览卡片 -->
    <el-row :gutter="20" class="overview-cards" data-aos="fade-up" data-aos-delay="100">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card glass-effect elevate-on-hover">
          <div class="stat-icon pulse-animation shimmer-effect">
            <i class="el-icon-monitor"></i>
          </div>
          <div class="stat-content">
            <h3>设备管理</h3>
            <p>集中管理所有监控设备</p>
            <el-button type="text" @click="goToDevices" class="text-button">查看详情</el-button>
          </div>
          <div class="card-glow"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card glass-effect elevate-on-hover">
          <div class="stat-icon temperature pulse-animation shimmer-effect">
            <i class="el-icon-sunny"></i>
          </div>
          <div class="stat-content">
            <h3>温度传感器</h3>
            <p>实时监控环境温度变化</p>
            <el-button type="text" @click="goToTemperature" class="text-button">查看详情</el-button>
          </div>
          <div class="card-glow"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card glass-effect elevate-on-hover">
          <div class="stat-icon pressure pulse-animation shimmer-effect">
            <i class="el-icon-s-marketing"></i>
          </div>
          <div class="stat-content">
            <h3>压力传感器</h3>
            <p>精确测量压力数据</p>
            <el-button type="text" @click="goToPressure" class="text-button">查看详情</el-button>
          </div>
          <div class="card-glow"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card glass-effect elevate-on-hover">
          <div class="stat-icon heart pulse-animation shimmer-effect">
            <i class="el-icon-first-aid-kit"></i>
          </div>
          <div class="stat-content">
            <h3>心率传感器</h3>
            <p>实时监测心率变化</p>
            <el-button type="text" @click="goToHeartRate" class="text-button">查看详情</el-button>
          </div>
          <div class="card-glow"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 技术特性 -->
    <div class="features-section" data-aos="fade-up" data-aos-delay="200">
      <h2 class="section-title">系统特性</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8">
          <div class="feature-card glass-effect elevate-on-hover">
            <div class="feature-icon rotate-animation shimmer-effect">
              <i class="el-icon-cpu"></i>
            </div>
            <h3>高性能架构</h3>
            <p>基于SpringBoot和Vue的现代化技术栈，提供高效稳定的系统性能</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <div class="feature-card glass-effect elevate-on-hover">
            <div class="feature-icon rotate-animation shimmer-effect">
              <i class="el-icon-lock"></i>
            </div>
            <h3>安全可靠</h3>
            <p>采用JWT认证和Spring Security安全框架，确保数据安全可靠</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <div class="feature-card glass-effect elevate-on-hover">
            <div class="feature-icon rotate-animation shimmer-effect">
              <i class="el-icon-data-analysis"></i>
            </div>
            <h3>实时监控</h3>
            <p>支持多类型传感器数据实时采集与监控，提供可视化数据分析</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 数据可视化 -->
    <div class="data-visualization" data-aos="fade-up" data-aos-delay="250">
      <h2 class="section-title">实时数据监控</h2>
      <div class="chart-row">
        <div class="chart-col">
          <div class="chart-container glass-effect elevate-on-hover">
            <div class="chart-header">
              <h3>系统性能监控</h3>
              <div class="chart-controls">
                <el-button-group size="mini">
                  <el-button type="primary" :class="{ active: chartPeriod === 'day' }" @click="chartPeriod = 'day'">日</el-button>
                  <el-button type="primary" :class="{ active: chartPeriod === 'week' }" @click="chartPeriod = 'week'">周</el-button>
                  <el-button type="primary" :class="{ active: chartPeriod === 'month' }" @click="chartPeriod = 'month'">月</el-button>
                </el-button-group>
              </div>
            </div>
            <div class="chart-content">
              <div class="performance-chart">
                <svg viewBox="0 0 400 200" class="chart-svg">
                  <defs>
                    <linearGradient id="performanceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                      <stop offset="0%" style="stop-color:#165DFF;stop-opacity:0.8" />
                      <stop offset="100%" style="stop-color:#165DFF;stop-opacity:0.1" />
                    </linearGradient>
                    <filter id="glow">
                      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                      <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                      </feMerge>
                    </filter>
                  </defs>
                  <g class="chart-grid">
                    <line x1="50" y1="20" x2="50" y2="170" stroke="#e0e0e0" stroke-width="1"/>
                    <line x1="50" y1="170" x2="380" y2="170" stroke="#e0e0e0" stroke-width="1"/>
                    <line x1="50" y1="20" x2="380" y2="20" stroke="#f0f0f0" stroke-width="1" stroke-dasharray="2,2"/>
                    <line x1="50" y1="70" x2="380" y2="70" stroke="#f0f0f0" stroke-width="1" stroke-dasharray="2,2"/>
                    <line x1="50" y1="120" x2="380" y2="120" stroke="#f0f0f0" stroke-width="1" stroke-dasharray="2,2"/>
                  </g>
                  <path class="chart-line" d="M 50 120 Q 120 80, 190 100 T 330 70 L 380 90" 
                        stroke="#165DFF" stroke-width="3" fill="none" filter="url(#glow)"/>
                  <path class="chart-area" d="M 50 120 Q 120 80, 190 100 T 330 70 L 380 90 L 380 170 L 50 170 Z" 
                        fill="url(#performanceGradient)" opacity="0.6"/>
                </svg>
              </div>
              <div class="chart-legend">
                <div class="legend-item">
                  <span class="legend-color" style="background-color: #165DFF;"></span>
                  <span class="legend-label">CPU使用率</span>
                </div>
                <div class="legend-item">
                  <span class="legend-color" style="background-color: #4D85FF;"></span>
                  <span class="legend-label">内存使用率</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-col">
          <div class="chart-container glass-effect elevate-on-hover">
            <div class="chart-header">
              <h3>设备状态分布</h3>
              <div class="chart-controls">
                <el-button type="text" icon="el-icon-refresh" @click="refreshDeviceData">刷新</el-button>
              </div>
            </div>
            <div class="chart-content">
              <div class="device-stats">
                <div class="circular-chart pulse-ring">
                  <svg viewBox="0 0 120 120" class="circular-svg">
                    <circle class="circular-bg" cx="60" cy="60" r="54" fill="none" stroke="#f0f0f0" stroke-width="12"/>
                    <circle class="circular-progress online" cx="60" cy="60" r="54" fill="none" 
                            stroke="#67c23a" stroke-width="12" stroke-linecap="round"
                            stroke-dasharray="339.292" stroke-dashoffset="84.823" 
                            transform="rotate(-90 60 60)"/>
                    <text x="60" y="55" text-anchor="middle" class="percentage">75%</text>
                    <text x="60" y="75" text-anchor="middle" class="label">在线设备</text>
                  </svg>
                </div>
                <div class="device-details">
                  <div class="device-stat">
                    <div class="stat-dot online"></div>
                    <span class="stat-label">在线设备</span>
                    <span class="stat-value">2</span>
                  </div>
                  <div class="device-stat">
                    <div class="stat-dot offline"></div>
                    <span class="stat-label">离线设备</span>
                    <span class="stat-value">1</span>
                  </div>
                  <div class="device-stat">
                    <div class="stat-dot maintenance"></div>
                    <span class="stat-label">维护中</span>
                    <span class="stat-value">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时数据流 -->
    <div class="real-time-data" data-aos="fade-up" data-aos-delay="350">
      <h2 class="section-title">实时数据流</h2>
      <div class="data-stream-container">
        <div class="stream-header">
          <div class="stream-title">
            <i class="el-icon-cpu"></i>
            <span>系统监控数据流</span>
          </div>
          <div class="stream-status">
            <span class="status-indicator online"></span>
            <span class="status-text">实时连接</span>
          </div>
        </div>
        <div class="stream-content">
          <div class="data-stream">
            <div class="stream-item" v-for="(item, index) in dataStream" :key="index">
              <div class="stream-time">{{ item.time }}</div>
              <div class="stream-data">
                <span class="data-label">{{ item.label }}:</span>
                <span class="data-value" :class="item.status">{{ item.value }}</span>
                <span class="data-unit">{{ item.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统信息 -->
    <section class="info-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">系统信息</h2>
        <div class="info-grid">
          <div class="info-card glass-effect elevate-on-hover" data-aos="fade-up" data-aos-delay="100">
            <div class="info-icon shimmer-effect">
              <i class="el-icon-info"></i>
            </div>
            <h3 class="info-title">系统版本</h3>
            <p class="info-value">v{{ version }}</p>
          </div>

          <div class="info-card glass-effect elevate-on-hover" data-aos="fade-up" data-aos-delay="200">
            <div class="info-icon shimmer-effect">
              <i class="el-icon-time"></i>
            </div>
            <h3 class="info-title">运行时间</h3>
            <p class="info-value">{{ uptime }}</p>
          </div>

          <div class="info-card glass-effect elevate-on-hover" data-aos="fade-up" data-aos-delay="300">
            <div class="info-icon shimmer-effect">
              <i class="el-icon-user"></i>
            </div>
            <h3 class="info-title">在线用户</h3>
            <p class="info-value">{{ onlineUsers }}</p>
          </div>

          <div class="info-card glass-effect elevate-on-hover" data-aos="fade-up" data-aos-delay="400">
            <div class="info-icon shimmer-effect">
              <i class="el-icon-s-data"></i>
            </div>
            <h3 class="info-title">数据更新</h3>
            <p class="info-value">{{ lastUpdate }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部信息 -->
    <div class="footer-section" data-aos="fade-up" data-aos-delay="400">
      <div class="footer-content">
        <p>&copy; 2025 居家睡眠监护系统. All rights reserved.</p>
        <div class="footer-links">
          <a href="#" class="footer-link">关于我们</a>
          <a href="#" class="footer-link">服务条款</a>
          <a href="#" class="footer-link">隐私政策</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本信息
      version: "3.9.0",
      uptime: '15天 8小时 32分钟',
      onlineUsers: 42,
      lastUpdate: this.formatDate(new Date()),
      // 图表周期
      chartPeriod: "day",
      // 性能数据
      performanceData: {
        cpu: [65, 59, 80, 81, 56, 55, 70],
        memory: [45, 49, 60, 71, 46, 45, 50]
      },
      // 设备数据
      deviceData: {
        online: 24,
        offline: 8,
        maintenance: 3
      },
      // 实时数据流
      dataStream: [
        { time: '10:23:45', label: 'CPU使用率', value: '45.2', unit: '%', status: 'normal' },
        { time: '10:23:42', label: '内存使用率', value: '67.8', unit: '%', status: 'warning' },
        { time: '10:23:40', label: '网络延迟', value: '12', unit: 'ms', status: 'normal' },
        { time: '10:23:38', label: '磁盘使用率', value: '82.5', unit: '%', status: 'danger' },
        { time: '10:23:35', label: '温度', value: '36.5', unit: '°C', status: 'normal' }
      ]
    };
  },
  mounted() {
    this.initCharts();
    this.startDataUpdate();
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer);
    }
  },
  methods: {
    // 切换全屏
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
          this.$message({
            message: `无法进入全屏模式: ${err.message}`,
            type: 'error'
          });
        });
      } else {
        document.exitFullscreen();
      }
    },

    goToDashboard() {
      this.$router.push({ path: "/dashboard/index" });
    },
    goToDevices() {
      this.$router.push({ path: "/device" });
    },
    goToSensors() {
      this.$router.push({ path: "/sensor/temperature" });
    },
    goToTemperature() {
      this.$router.push({ path: "/sensor/temperature" });
    },
    goToPressure() {
      this.$router.push({ path: "/sensor/pressure" });
    },
    goToHeartRate() {
      this.$router.push({ path: "/sensor/heart_rate" });
    },
    goTarget(url) {
      window.open(url);
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
    // 初始化图表
    initCharts() {
      this.updatePerformanceChart();
      this.updateDeviceChart();
    },
    // 更新性能图表
    updatePerformanceChart() {
      const chartLine = document.querySelector('.chart-line');
      const chartArea = document.querySelector('.chart-area');
      
      if (chartLine && chartArea) {
        // 生成新的数据点
        const newData = this.generatePerformanceData();
        
        // 创建贝塞尔曲线路径
        const path = this.createBezierPath(newData);
        const areaPath = path + ' L 380 170 L 50 170 Z';
        
        // 更新路径
        chartLine.setAttribute('d', path);
        chartArea.setAttribute('d', areaPath);
      }
    },
    // 更新设备图表
    updateDeviceChart() {
      const total = 2 + 1 + 0;
      const percentage = Math.round((2 / total) * 100);
      const circumference = 2 * Math.PI * 54; // 圆周长
      const offset = circumference - (percentage / 100) * circumference;
      
      const progressCircle = document.querySelector('.circular-progress');
      const percentageText = document.querySelector('.percentage');
      
      if (progressCircle && percentageText) {
        progressCircle.setAttribute('stroke-dashoffset', offset);
        percentageText.textContent = `${percentage}%`;
      }
    },
    // 生成性能数据
    generatePerformanceData() {
      const points = [];
      const numPoints = 7;
      
      for (let i = 0; i < numPoints; i++) {
        const x = 50 + (i * 55);
        const y = 170 - (Math.random() * 120 + 30); // 随机Y值，范围30-150
        points.push({ x, y });
      }
      
      return points;
    },
    // 创建贝塞尔曲线路径
    createBezierPath(points) {
      if (points.length < 2) return '';
      
      let path = `M ${points[0].x} ${points[0].y}`;
      
      for (let i = 1; i < points.length; i++) {
        const prev = points[i - 1];
        const curr = points[i];
        
        if (i === 1) {
          path += ` L ${curr.x} ${curr.y}`;
        } else {
          const cp1x = prev.x + (curr.x - prev.x) / 2;
          const cp1y = prev.y;
          const cp2x = prev.x + (curr.x - prev.x) / 2;
          const cp2y = curr.y;
          
          path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
        }
      }
      
      return path;
    },
    // 刷新设备数据
    refreshDeviceData() {
      // 模拟数据刷新
      this.deviceData.online = 2;
      this.deviceData.offline = 1
      this.deviceData.maintenance = 75;
      
      this.updateDeviceChart();
      
      this.$message({
        message: '设备数据已刷新',
        type: 'success',
        duration: 2000
      });
    },
    // 开始数据更新定时器
    startDataUpdate() {
      this.updateTimer = setInterval(() => {
        this.updatePerformanceChart();
        this.updateDataStream();
      }, 3000);
    },
    // 更新实时数据流
    updateDataStream() {
      // 生成新的数据项
      const newDataItems = [
        { label: 'CPU使用率', unit: '%', status: 'normal' },
        { label: '内存使用率', unit: '%', status: 'warning' },
        { label: '网络延迟', unit: 'ms', status: 'normal' },
        { label: '磁盘使用率', unit: '%', status: 'danger' },
        { label: '温度', unit: '°C', status: 'normal' }
      ];
      
      // 随机选择一个数据项
      const randomIndex = Math.floor(Math.random() * newDataItems.length);
      const selectedItem = newDataItems[randomIndex];
      
      // 生成随机值
      let value;
      if (selectedItem.label === 'CPU使用率' || selectedItem.label === '内存使用率' || selectedItem.label === '磁盘使用率') {
        value = (Math.random() * 100).toFixed(1);
        // 根据值设置状态
        if (parseFloat(value) < 60) {
          selectedItem.status = 'normal';
        } else if (parseFloat(value) < 80) {
          selectedItem.status = 'warning';
        } else {
          selectedItem.status = 'danger';
        }
      } else if (selectedItem.label === '网络延迟') {
        value = Math.floor(Math.random() * 100);
        selectedItem.status = parseFloat(value) < 50 ? 'normal' : 'warning';
      } else if (selectedItem.label === '温度') {
        value = (Math.random() * 20 + 30).toFixed(1);
        selectedItem.status = parseFloat(value) < 40 ? 'normal' : 'warning';
      }
      
      // 获取当前时间
      const now = new Date();
      const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
      
      // 创建新数据项
      const newItem = {
        time: timeString,
        label: selectedItem.label,
        value: value,
        unit: selectedItem.unit,
        status: selectedItem.status
      };
      
      // 添加到数据流开头
      this.dataStream.unshift(newItem);
      
      // 保持数据流长度不超过5
      if (this.dataStream.length > 5) {
        this.dataStream.pop();
      }
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  padding: 0;
  background-color: #f5f7fa;
  overflow: hidden;
}

.hero-section {
  background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
  color: white;
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;

  .hero-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: bgAnimation 15s ease infinite;
    z-index: 0;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.3;
    z-index: 0;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;

    .title-text {
      position: relative;
      z-index: 2;
    }

    .title-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transform: translateX(-100%);
      animation: shimmer 3s infinite;
      z-index: 1;
    }
  }

  .hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 40px;
    opacity: 0.9;
    font-weight: 300;
  }

  .hero-buttons {
    .glow-button {
      margin: 0 8px;
      padding: 12px 30px;
      font-size: 16px;
      border-radius: 50px;
      font-weight: 500;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &.primary {
      background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
      border: none;
      box-shadow: 0 4px 15px rgba(22, 93, 255, 0.4);

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 20px rgba(22, 93, 255, 0.5);
      }
    }

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }

      &:hover::before {
        left: 100%;
      }
    }
  }

  .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;

    .shape {
      position: absolute;
      opacity: 0.1;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);

      &.shape-1 {
        width: 80px;
        height: 80px;
        top: 10%;
        left: 10%;
        animation: float 8s ease-in-out infinite;
      }

      &.shape-2 {
        width: 120px;
        height: 120px;
        top: 70%;
        right: 10%;
        animation: float 10s ease-in-out infinite 2s;
      }

      &.shape-3 {
        width: 60px;
        height: 60px;
        bottom: 10%;
        left: 30%;
        animation: float 7s ease-in-out infinite 1s;
      }
    }
  }
}

.overview-cards {
  padding: 0 20px;
  margin-bottom: 40px;

  .stat-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .stat-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
      background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
      color: white;
      font-size: 22px;
      position: relative;
      z-index: 2;

      &.temperature {
        background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
      }

      &.pressure {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.heart {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }
    }

    .stat-content {
      flex: 1;
      position: relative;
      z-index: 2;

      h3 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      p {
        margin: 0 0 15px;
        color: #606266;
        font-size: 14px;
        line-height: 1.5;
      }

      .text-button {
        padding: 0;
        font-size: 14px;
        color: #165DFF;
        font-weight: 500;
        position: relative;
        transition: all 0.3s ease;

        &:hover {
          color: #66b1ff;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background-color: #165DFF;
          transition: width 0.3s ease;
        }

        &:hover::after {
          width: 100%;
        }
      }
    }

    .card-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(22, 93, 255, 0.05) 0%, rgba(22, 93, 255, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    &:hover .card-glow {
      opacity: 1;
    }
  }
}

.features-section {
  padding: 40px 20px;
  background-color: white;
  margin-bottom: 30px;

  .section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #303133;
    position: relative;
    font-weight: 600;

    &::after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
      border-radius: 2px;
    }
  }

  .feature-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, rgba(22, 93, 255, 0.05) 0%, rgba(22, 93, 255, 0.05) 100%);
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: white;
      font-size: 24px;
    }

    h3 {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 15px;
      color: #303133;
    }

    p {
      font-size: 14px;
      color: #606266;
      line-height: 1.6;
      margin: 0;
    }
  }
}

// 系统信息样式
.info-section {
  padding: 40px 20px;
  background-color: #f5f7fa;

  .section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #303133;
    position: relative;
    font-weight: 600;

    &::after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
      border-radius: 2px;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .info-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .info-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #165DFF 0%, #165DFF 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: white;
      font-size: 24px;
    }

    .info-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 10px;
    }

    .info-value {
      font-size: 16px;
      color: #606266;
      margin: 0;
    }
  }
}

.footer-section {
  text-align: center;
  padding: 30px 20px;
  background-color: #303133;
  color: white;
  font-size: 14px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.1;
  }

  .footer-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .footer-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;

    .footer-link {
      color: rgba(255, 255, 255, 0.8);
      margin: 0 10px;
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;

      &:hover {
        color: white;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: white;
        transition: width 0.3s ease;
      }

      &:hover::after {
        width: 100%;
      }
    }
  }
}

// 动画定义
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes bgAnimation {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

// 实时数据流样式
.real-time-data {
  padding: 40px 20px;
  background-color: white;
  margin-bottom: 40px;

  .data-stream-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    .stream-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
      background-color: #fafafa;

      .stream-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin: 0;
        display: flex;
        align-items: center;

        i {
          margin-right: 8px;
          color: #165DFF;
        }
      }

      .stream-status {
        display: flex;
        align-items: center;

        .status-indicator {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #67c23a;
          margin-right: 8px;
        }

        .status-text {
          font-size: 14px;
          color: #606266;
        }
      }
    }

    .stream-content {
      padding: 15px 20px;

      .data-stream {
        .stream-item {
          display: flex;
          padding: 10px 0;
          border-bottom: 1px solid #f5f5f5;
          transition: all 0.2s ease;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background-color: #f9f9f9;
            border-radius: 4px;
            padding-left: 10px;
            padding-right: 10px;
          }

          .stream-time {
            width: 80px;
            font-size: 12px;
            color: #909399;
            font-family: monospace;
          }

          .stream-data {
            flex: 1;
            display: flex;
            align-items: center;

            .data-label {
              font-size: 14px;
              color: #606266;
              margin-right: 8px;
            }

            .data-value {
              font-size: 16px;
              font-weight: 600;
              margin-right: 5px;

              &.normal {
                color: #67c23a;
              }

              &.warning {
                color: #e6a23c;
              }

              &.danger {
                color: #f56c6c;
              }
            }

            .data-unit {
              font-size: 14px;
              color: #909399;
            }
          }
        }
      }
    }
  }
}

// 滑入动画
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 数据可视化样式
.data-visualization {
  padding: 40px 20px;
  background-color: white;
  margin-bottom: 30px;

  .chart-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    
    @media (min-width: 768px) {
      display: flex;
      flex-wrap: nowrap;
    }
  }

  .chart-col {
    flex: 1;
    min-width: 300px;
    padding: 0 10px;
    margin-bottom: 20px;
    
    @media (max-width: 768px) {
      padding: 0;
      margin-bottom: 20px;
    }
  }

  .chart-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    margin: 0 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      flex-shrink: 0;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        position: relative;
        padding-left: 12px;
        
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 18px;
          background-color: #165DFF;
          border-radius: 2px;
        }
      }

      .chart-controls {
        .el-button {
          &.active {
            background-color: #165DFF;
            border-color: #165DFF;
            color: white;
          }
        }
      }
    }

    .chart-content {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .performance-chart {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;

    .chart-svg {
      width: 100%;
      height: 100%;

      .chart-line {
        animation: drawLine 2s ease-in-out infinite alternate;
      }

      .chart-area {
        animation: fadeInOut 4s ease-in-out infinite;
      }

      .chart-grid {
        line {
          animation: gridPulse 4s ease-in-out infinite;
        }
      }
    }
  }

  .chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;

    .legend-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #606266;

      .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 6px;
      }
    }
  }

  .device-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .circular-chart {
      width: 120px;
      height: 120px;

      .circular-svg {
        width: 100%;
        height: 100%;

        .circular-progress {
          transition: stroke-dashoffset 1s ease-in-out;
        }

        .percentage {
          font-size: 18px;
          font-weight: 600;
          fill: #303133;
        }

        .label {
          font-size: 12px;
          fill: #909399;
        }
      }
    }

    .device-details {
      flex: 1;
      margin-left: 20px;

      .device-stat {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .stat-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 10px;

          &.online {
            background-color: #67c23a;
          }

          &.offline {
            background-color: #f56c6c;
          }

          &.maintenance {
            background-color: #e6a23c;
          }
        }

        .stat-label {
          flex: 1;
          font-size: 14px;
          color: #606266;
        }

        .stat-value {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
    }
  }
}

// 动画定义
@keyframes drawLine {
  0% {
    stroke-dasharray: 0 1000;
  }
  100% {
    stroke-dasharray: 1000 0;
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes gridPulse {
  0%, 100% {
    opacity: 0.05;
  }
  50% {
    opacity: 0.1;
  }
}

// 玻璃效果
.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

// 玻璃卡片效果
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

// 悬停提升效果
.hover-lift {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  }
}

// 脉冲动画
.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
  }
}

// 旋转动画
.rotate-animation {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 高级交互效果和微动画
.shimmer-effect {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// 数据流动画效果
.data-flow {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(22, 93, 255, 0.8),
      transparent
    );
    transform: translateY(-50%);
    animation: dataFlow 3s linear infinite;
  }
}

@keyframes dataFlow {
  0% {
    transform: translateY(-50%) translateX(-100%);
  }
  100% {
    transform: translateY(-50%) translateX(100%);
  }
}

// 脉冲环效果
.pulse-ring {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(22, 93, 255, 0.5);
    transform: translate(-50%, -50%);
    animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@keyframes pulseRing {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

// 悬浮效果
.float-animation {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

// 交互式按钮效果
.interactive-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }

  &:hover::before {
    width: 300px;
    height: 300px;
  }
}

// 渐变边框动画
.gradient-border {
  position: relative;
  background: white;
  border-radius: 8px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(45deg, #165DFF, #00C6FF);
    background-size: 400% 400%;
    animation: gradientBorder 3s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
  }
}

@keyframes gradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

// 旋转加载动画
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(22, 93, 255, 0.3);
  border-radius: 50%;
  border-top-color: #165DFF;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem !important;
  }

  .hero-subtitle {
    font-size: 1.2rem !important;
  }

  .hero-buttons {
    .el-button {
      margin: 5px;
      padding: 10px 20px;
      font-size: 14px;
    }
  }

  .section-title {
    font-size: 2rem !important;
  }

  .device-stats {
    flex-direction: column;
    align-items: center;

    .device-details {
      margin-left: 0;
      margin-top: 20px;
      width: 100%;
    }
  }

  .info-section {
    .info-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }

    .info-card {
      padding: 20px;

      .info-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 15px;
      }

      .info-title {
        font-size: 16px;
      }

      .info-value {
        font-size: 14px;
      }
    }
  }

  .real-time-data {
    .data-stream-container {
      .stream-header {
        flex-direction: column;
        align-items: flex-start;

        .stream-status {
          margin-top: 10px;
        }
      }

      .stream-content {
        .data-stream {
          .stream-item {
            .stream-time {
              width: 60px;
              font-size: 11px;
            }

            .stream-data {
              .data-label {
                font-size: 13px;
              }

              .data-value {
                font-size: 15px;
              }

              .data-unit {
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
}
</style>